首屏加载时间过长?首屏白屏问题解决?打包文件体积过大优化? |
您所在的位置:网站首页 › html引入vue-router js › 首屏加载时间过长?首屏白屏问题解决?打包文件体积过大优化? |
一、vue首屏加载过慢
1.Vue-router 路由懒加载 2.在webpack打包的过程中,将多余文件去掉,如不生成map文件,即在config/index.js中将productionSourceMap的值修改为false,就可以在编译时不生成.map文件了 3.第三方库使用CDN引入: 1)第一步:可以采用CDN加速引入(防止挂掉,可下载到本地上传到自己的服务器) 2)第二步:分离打包第三方资源包,去vue-config文件中去配置externals,写上你已经在index.html中引用了cdn的库 4.gzip压缩:前端配置gzip压缩,并且服务端使用nginx开启gzip,用来减小网络传输的流量大小 1)命令行执行:npm i compression-webpack-plugin -D 2)在webpack的dev开发配置文件中加入如下代码: const CompressionWebpackPlugin = require('compression-webpack-plugin') plugins: [ new CompressionWebpackPlugin() ]5.不要滥用第三方库,用到一个功能点整个第三方全部引入,按需引入;一个项目尽量使用一个库 6.代码层面的优化 1)减少http请求数,减小请求大小 2)图片使用雪碧图,使用字体图标或者使用svg文件等;图片懒加载 3) cdn内容分发网络 4)javascripte defer 异步加载延迟执行 5)异步加载js,async是JavaScript下载完成,就会立即执行代码,等待执行完之后才继续解析HTML 6)合理使用缓存 7)优化代码,组件化、模块化,代码重用 8)css放在头部,js放在底部 9)合理使用v-if和v-show 10)for循环设置key值 11)服务端渲染 12)DNS预解析 13)Defer加载Js 二、白屏优化1.完成以上优化加载基础上,白屏期间加骨架屏和loading 2.服务端渲染,也就是ssr技术,比如nuxt.js技术做ssr开发 三、打包体积过大问题1.webpack打包不生成map文件 config/index.js productionSourceMap=false 2.第三方库使用CDN引入 3.gzip压缩 4.不要滥用第三方库,按需引入组件 5.代码精简及静态资源如图片压缩合并等 参考:vue 项目首页加载速度优化以及解决首页白屏问题_vue首页加载过慢白屏_郝艳峰Vip的博客-CSDN博客vue 项目首页加载速度优化以及解决首页白屏问题_vue首页加载过慢白屏_郝艳峰Vip的博客-CSDN博客vue 项目首页加载速度优化以及解决首页白屏问题_vue首页加载过慢白屏_郝艳峰Vip的博客-CSDN博客 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |